<template>
  <view class="container">
	  <uni-nav-bar
	    title="主页"
	    statusBar="true"
	    fixed="true"
	    color="#000000"
	    backgroundColor="#ffffff"
	  ></uni-nav-bar>
    <!-- 店铺信息 -->
    <view class="shop-header">
      <view class="shop-info">
        <image class="shop-logo" src="https://tse2-mm.cn.bing.net/th/id/OIP-C.aMNqrD9Xi0OxD_50t-qyqwHaHa?w=194&h=194&c=7&r=0&o=5&pid=1.7" mode="aspectFill"></image>
        <text class="shop-name">线上乐购</text>
      </view>
    </view>

    <!-- 通知栏 -->
    <view class="notice-banner">
      <image class="notice-image" src="https://tse3-mm.cn.bing.net/th/id/OIP-C.1zq7biIP7g31CSWF_GjrCgHaNK?w=187&h=333&c=7&r=0&o=5&pid=1.7" mode="widthFix"></image>
    </view>

    <!-- 配送提示 -->
    <view class="delivery-tip">
      <image class="delivery-icon" src="https://tse2-mm.cn.bing.net/th/id/OIP-C.aMNqrD9Xi0OxD_50t-qyqwHaHa?w=194&h=194&c=7&r=0&o=5&pid=1.7" mode="aspectFit"></image>
      <text class="delivery-text">点击全部分类即可查看更多商品！十元起送！</text>
    </view>

    <!-- 分类菜单 -->
    <view class="category-grid">
      <view class="category-item" v-for="(item, index) in categories" :key="index">
        <image class="category-icon" :src="item.icon" mode="aspectFit"></image>
        <text class="category-name">{{ item.name }}</text>
      </view>
    </view>
	<view-tabbar tabIndex=0></view-tabbar>
  </view>
</template>


<script src="./index.js"></script>
<style src="./index.scss" lang="scss" scoped></style>
<style scoped>
/* #ifdef MP-WEIXIN || APP-PLUS */
::v-deep ::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  background: transparent;
  color: transparent;
}
/* #endif */
</style>

